<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link href="https://at.alicdn.com/t/c/font_4661688_38zylurylvy.css" rel="stylesheet">
    <link href="./CSS/demo.css" rel="stylesheet">
</head>
<body>
<div id="root">
    <header>
        <div class="header">
            <div><i class="iconfont icon-xiangqingzhangdan"></i>账单</div>
            <div>
                <i class="iconfont icon-yonghu"></i>
                <i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-gengduo"></i>
            </div>
        </div>
        <nav>
            <ul class="header_nav">
                <li v-for="item in header_nav">
                    <a href="">
                        <div>
                            <i :class="item.icon_class" class="iconfont"></i>
                            <div v-if="item.user_avatar" class="user_avatar"><img :src="item.user_avatar" alt=""></div>
                            <p>{{item.name}}</p>
                        </div>
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <section v-for="items in section_powers">
            <div>
                <ul class="section_powers">
                    <li v-for="item in  items">
                        <a href="">
                            <div class="section_power_box">
                                <i :class="item.icon_class" :style="'color:'+ item.color" class="iconfont"></i>
                                <p>{{item.name}}</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="guanggao">
                <img alt="" src="./images/guanggao.png">
                <div>
                    <h1><span>15.8元</span>起看大片</h1>
                    <p>秋末 佳片共赏</p>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <nav class="footer_nav">
            <ul>
                <li>
                    <a href="">
                        <div class="show_foot_nav footer_nav_box">
                            <i class="iconfont icon-zhifubao"></i>
                            <p>支付宝</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="footer_nav_box">
                            <i class="iconfont icon-koubei1"></i>
                            <p>口碑</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="footer_nav_box">
                            <i class="iconfont icon-pengyou"></i>
                            <p>朋友</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="footer_nav_box">
                            <i class="iconfont icon-zhifufangshi"></i>
                            <p>我的</p>
                        </div>
                    </a>
                </li>
            </ul>

        </nav>
    </footer>

</div>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                header_nav: [
                    {id: 1, icon_class: 'icon-saoyisao', name: '扫一扫'},
                    {id: 2, icon_class: 'icon-zhifubaozhifu', name: '付款'},
                    {id: 3, icon_class: 'icon-qiaquan', name: '卡券'},
                    {id: 4, user_avatar: './images/img2.jpg', name: '用户名'},
                ],
                section_powers: [
                    [
                        {id: 1, icon_class: 'icon-zhuanzhang', name: '转账', color: '#2EB3E8'},
                        {id: 2, icon_class: 'icon-hongbao', name: '红包', color: '#F96268'},
                        {id: 3, icon_class: 'icon-yuebao', name: '余额宝', color: '#F96268'},
                        {id: 4, icon_class: 'icon-shoujichongzhi', name: '手机充值', color: '#2EB3E8'},

                        {id: 5, icon_class: 'icon-xinyongka', name: '信用卡还款', color: '#FFB359'},
                        {id: 6, icon_class: 'icon-zhimaxinyong', name: '芝麻信用', color: '#36BC99'},
                        {id: 7, icon_class: 'icon-didichuhang', name: '滴滴出行', color: '#FFB359'},
                        {id: 8, icon_class: 'icon-taopiaopiao', name: '淘票票', color: '#F96268'},

                        {id: 9, icon_class: 'icon-mayijubao', name: '蚂蚁聚宝', color: '#2EB3E8'},
                        {id: 10, icon_class: 'icon-1_waimai-27', name: '外卖', color: '#F15A4A'},
                        {id: 11, icon_class: 'icon-tianmaogouwudai', name: '天猫', color: '#DD2727'},
                        {id: 12, icon_class: 'icon-shenghuojiaofei', name: '生活缴费', color: '#2EB3E8'}
                    ],
                    [
                        {id: 1, icon_class: 'icon-chuhang', name: '出行', color: '#2EB3E8'},
                        {id: 2, icon_class: 'icon-shoucang', name: '收藏', color: '#36BC99'},
                        {id: 3, icon_class: 'icon-tianmaochaoshi', name: '天猫超市', color: '#DD2727'},
                        {id: 4, icon_class: 'icon-jizhangben', name: '支付记录', color: '#2EB3E8'},

                        {id: 5, icon_class: 'icon-xinyongka', name: '信用卡还款', color: '#FFB359'},
                        {id: 6, icon_class: 'icon-zhimaxinyong', name: '芝麻信用', color: '#36BC99'},
                        {id: 7, icon_class: 'icon-didichuhang', name: '滴滴出行', color: '#FFB359'},
                        {id: 8, icon_class: 'icon-taopiaopiao', name: '淘票票', color: '#F96268'},

                        {id: 9, icon_class: 'icon-mayijubao', name: '蚂蚁聚宝', color: '#2EB3E8'},
                        {id: 10, icon_class: 'icon-1_waimai-27', name: '外卖', color: '#F15A4A'},
                        {id: 11, icon_class: 'icon-tianmaogouwudai', name: '天猫', color: '#DD2727'},
                        {id: 12, icon_class: 'icon-shenghuojiaofei', name: '生活缴费', color: '#2EB3E8'}
                    ]
                ]
            }
        },
        methods: {}
    })
</script>

</body>
</html>